import React, { memo, useEffect, useRef } from "react";
import { shallowEqual, useDispatch, useSelector } from "react-redux";

import { getNewAlbumAction } from "../../store/actionCreators";
import { AlbumWrapper } from "./style";

import CJXThemeHeaderRcm from "@/components/theme-header-rcm";
import CJXAlbumCover from "@/components/album-cover";
import { Carousel } from 'antd';



export default memo(function CJXNewAlbum() {

    //redux hook
    const { newAlbums } = useSelector((state) => {
        return {
            newAlbums: state.getIn(["recommend", "newAlbums"])
        }
    }, shallowEqual)
    const dispatch = useDispatch();

    const pageRef = useRef();
    useEffect(() => {
        dispatch(getNewAlbumAction())
    }, [dispatch]);

    return (
        <AlbumWrapper>
            
            <CJXThemeHeaderRcm title="新碟上架" url="/discover/album"></CJXThemeHeaderRcm>
            <div className="content">
                <button className="arrow arrow-left sprite_02"
                    onClick={e => pageRef.current.prev()}></button>
                <div className="album">
                    <Carousel dots={false} ref={pageRef}>
                        {
                            [0, 1].map(item => {
                                return (
                                    <div key={item} className="page">
                                        {
                                            newAlbums.slice(item * 5, (item + 1) * 5).map(iten => {
                                                return <CJXAlbumCover key={iten.id}
                                                    info={iten}
                                                    size={100}
                                                    width={118}
                                                    bgp="-570px" />
                                            })
                                        }
                                    </div>
                                )
                            })
                        }
                    </Carousel>
                </div>
                <button className="arrow arrow-right sprite_02"
                    onClick={e => pageRef.current.next()}></button>
            </div>
        </AlbumWrapper>
    )
})